<template>
    <div class="page" >
        <h3 class="page_title" > store 应用</h3>
        <p> 当前store中couter 值：{{ couter }} </p>
        <p> getters中 conter 乘以2的结果：{{ double }} </p>
        <div>
            <p class="the_title" >1、两个按钮，用来操作 store 中的 couter</p>
            <p>
                <button @click="add" >增加+</button>
                <button @click="reduce" >减少-</button>
            </p>
        </div>
        <div>
            <p class="the_title" >2、todolist 练习，通过状态管理中心来操作数据层，实现增删改</p>
            <p>
                <button @click="getList" >获取数据</button>
                <button @click="addShop" >增加商品</button>
            </p>
            <ul class="to_do_ul" v-if="toDoList.length" >
                <li v-for="( item ) in toDoList" :key="item.id">
                  名字：{{ item.name }}  价格：{{ item.price }}
                   <button @click="delTdItem(item.id)" >删除</button>
                   <button @click="modifyTdPrice(item)" >修改价格</button>
                </li>
            </ul>
        </div>
        <div>
            <p class="the_title" >3、ts 声明 $store 类型</p>
        </div>
    </div>
</template>

<script lang='ts' >
    import { computed, defineComponent } from 'vue';
    import { useStore } from '../../store';
    import { ADD_CONTER,REDUCE_CONTER,DEL_TO_DO_ITEM,
            MODIFY_TO_DO_PRICE,ADD_TO_DO_ITEM
    } from '../../store/mutation-types';
    export default defineComponent({
        name:"Store",
        setup () {

            const store = useStore()

            const couter = computed(() => {
                return store.state.couter
            })
            const double = computed(() => {
                return store.getters.couterDouble
            })

            const toDoList = computed(() => {
                return store.state.toDoList
            })

            const add = (): void => {
                store.commit(ADD_CONTER)
            }
            
            const reduce = (): void => {
                store.commit(REDUCE_CONTER)
            }
            // 这里只是测试下 返回 promise
            const getList = async () => {
                if(toDoList.value.length){
                    alert('已经获取了数据，无需再取')
                    return
                }
                await store.dispatch('getList')
            }

            const addShop = (): any => {
                let name =  window.prompt('请输入商品名字')
                if(!name) return
                let price =  window.prompt('请输入价格')
                if(!price) return
                store.commit(ADD_TO_DO_ITEM,{ name, price})
            }

            const delTdItem = ( id: number ): void => {
                store.commit(DEL_TO_DO_ITEM,id)
            }

            const modifyTdPrice = ( item: AjaxDataModel.DataKey ): void => {
                let price =  window.prompt('请输入价格')
                store.commit(MODIFY_TO_DO_PRICE,{ id:item.id,price })
            }

            return {
               couter,
               double,
               toDoList,
               add,
               reduce,
               getList,
               delTdItem,
               modifyTdPrice,
               addShop
            }
        },
        mounted() {
            console.log(this.$store)
            
        }
       
    }) 
</script>


<style lang="less" scoped>
    button{
        margin: 0 5px;
    }
    .to_do_ul{
        padding: 10px 0;
        li{
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
    }
</style>